
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>9 · GitBook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="../7/1.html" />
    
    
    <link rel="prev" href="../5/1.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    1
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../1/1.html">
            
                <a href="../1/1.html">
            
                    
                    2
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../1/2.html">
            
                <a href="../1/2.html">
            
                    
                    3
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../1/3.html">
            
                <a href="../1/3.html">
            
                    
                    4
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../2/1.html">
            
                <a href="../2/1.html">
            
                    
                    5
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../3/1.html">
            
                <a href="../3/1.html">
            
                    
                    6
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../4/1.html">
            
                <a href="../4/1.html">
            
                    
                    7
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../5/1.html">
            
                <a href="../5/1.html">
            
                    
                    8
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.9" data-path="1.html">
            
                <a href="1.html">
            
                    
                    9
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../7/1.html">
            
                <a href="../7/1.html">
            
                    
                    10
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >9</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="&#x5B9A;&#x4F4D;position">&#x5B9A;&#x4F4D;(position)</h1>
<h2 id="&#x76EE;&#x6807;">&#x76EE;&#x6807;</h2>
<ul>
<li><strong>&#x7406;&#x89E3;</strong><ul>
<li>&#x80FD;&#x8BF4;&#x51FA;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#x5B9A;&#x4F4D;</li>
<li>&#x80FD;&#x8BF4;&#x51FA;&#x5B9A;&#x4F4D;&#x7684;4&#x79CD;&#x5206;&#x7C7B;</li>
<li>&#x80FD;&#x8BF4;&#x51FA;&#x56DB;&#x79CD;&#x5B9A;&#x4F4D;&#x7684;&#x5404;&#x81EA;&#x7279;&#x70B9;</li>
<li>&#x80FD;&#x8BF4;&#x51FA;&#x6211;&#x4EEC;&#x4E3A;&#x4EC0;&#x4E48;&#x5E38;&#x7528;&#x5B50;&#x7EDD;&#x7236;&#x76F8;&#x5E03;&#x5C40;</li>
</ul>
</li>
<li><strong>&#x5E94;&#x7528;</strong><ul>
<li>&#x80FD;&#x5199;&#x51FA;&#x6DD8;&#x5B9D;&#x8F6E;&#x64AD;&#x56FE;&#x5E03;&#x5C40;</li>
</ul>
</li>
</ul>
<h2 id="1-css-&#x5E03;&#x5C40;&#x7684;&#x4E09;&#x79CD;&#x673A;&#x5236;">1. CSS &#x5E03;&#x5C40;&#x7684;&#x4E09;&#x79CD;&#x673A;&#x5236;</h2>
<blockquote>
<p>&#x7F51;&#x9875;&#x5E03;&#x5C40;&#x7684;&#x6838;&#x5FC3; &#x2014;&#x2014; &#x5C31;&#x662F;<strong>&#x7528; CSS &#x6765;&#x6446;&#x653E;&#x76D2;&#x5B50;&#x4F4D;&#x7F6E;</strong>&#x3002;</p>
</blockquote>
<p>CSS &#x63D0;&#x4F9B;&#x4E86; <strong>3 &#x79CD;&#x673A;&#x5236;</strong>&#x6765;&#x8BBE;&#x7F6E;&#x76D2;&#x5B50;&#x7684;&#x6446;&#x653E;&#x4F4D;&#x7F6E;&#xFF0C;&#x5206;&#x522B;&#x662F;<strong>&#x666E;&#x901A;&#x6D41;</strong>&#x3001;<strong>&#x6D6E;&#x52A8;</strong>&#x548C;<strong>&#x5B9A;&#x4F4D;</strong>&#xFF0C;&#x5176;&#x4E2D;&#xFF1A;</p>
<ol>
<li><p><strong>&#x666E;&#x901A;&#x6D41;</strong>&#xFF08;<strong>&#x6807;&#x51C6;&#x6D41;</strong>&#xFF09;</p>
</li>
<li><p><strong>&#x6D6E;&#x52A8;</strong></p>
<ul>
<li>&#x8BA9;&#x76D2;&#x5B50;&#x4ECE;&#x666E;&#x901A;&#x6D41;&#x4E2D;<strong>&#x6D6E;</strong>&#x8D77;&#x6765; &#x2014;&#x2014; <strong>&#x8BA9;&#x591A;&#x4E2A;&#x76D2;&#x5B50;(div)&#x6C34;&#x5E73;&#x6392;&#x5217;&#x6210;&#x4E00;&#x884C;</strong>&#x3002;</li>
</ul>
</li>
<li><p><strong>&#x5B9A;&#x4F4D;</strong></p>
<ul>
<li>&#x5C06;&#x76D2;&#x5B50;<strong>&#x5B9A;</strong>&#x5728;&#x67D0;&#x4E00;&#x4E2A;<strong>&#x4F4D;</strong>&#x7F6E;  &#x81EA;&#x7531;&#x7684;&#x6F02;&#x6D6E;&#x5728;&#x5176;&#x4ED6;&#x76D2;&#x5B50;&#x7684;&#x4E0A;&#x9762;  &#x2014;&#x2014; CSS &#x79BB;&#x4E0D;&#x5F00;&#x5B9A;&#x4F4D;&#xFF0C;&#x7279;&#x522B;&#x662F;&#x540E;&#x9762;&#x7684; js &#x7279;&#x6548;&#x3002;</li>
</ul>
</li>
</ol>
<h2 id="2-&#x4E3A;&#x4EC0;&#x4E48;&#x4F7F;&#x7528;&#x5B9A;&#x4F4D;">2. &#x4E3A;&#x4EC0;&#x4E48;&#x4F7F;&#x7528;&#x5B9A;&#x4F4D;</h2>
<blockquote>
<p>&#x6211;&#x4EEC;&#x5148;&#x6765;&#x770B;&#x4E00;&#x4E2A;&#x6548;&#x679C;&#xFF0C;&#x540C;&#x65F6;&#x601D;&#x8003;&#x4E00;&#x4E0B;<strong>&#x7528;&#x6807;&#x51C6;&#x6D41;&#x6216;&#x6D6E;&#x52A8;&#x80FD;&#x5426;&#x5B9E;&#x73B0;&#x7C7B;&#x4F3C;&#x7684;&#x6548;&#x679C;</strong>&#xFF1F;</p>
</blockquote>
<p><strong>1. &#x5C0F;&#x9EC4;&#x8272;&#x5757;</strong>&#x5728;&#x56FE;&#x7247;&#x4E0A;&#x79FB;&#x52A8;&#xFF0C;<strong>&#x5438;&#x5F15;&#x7528;&#x6237;&#x7684;&#x773C;&#x7403;</strong>&#x3002;</p>
<p><img src="images/03_&#x5B9A;&#x4F4D;&#x793A;&#x4F8B;3.png" alt="&#x5B9A;&#x4F4D;&#x793A;&#x4F8B;3"></p>
<p><strong>2. &#x5F53;&#x6211;&#x4EEC;&#x6EDA;&#x52A8;&#x7A97;&#x53E3;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x76D2;&#x5B50;&#x662F;&#x56FA;&#x5B9A;&#x5C4F;&#x5E55;&#x67D0;&#x4E2A;&#x4F4D;&#x7F6E;&#x7684;</strong></p>
<blockquote>
<p><strong>&#x7ED3;&#x8BBA;</strong>&#xFF1A;&#x8981;&#x5B9E;&#x73B0;&#x4EE5;&#x4E0A;&#x6548;&#x679C;&#xFF0C;<strong>&#x6807;&#x51C6;&#x6D41;</strong>&#x6216;<strong>&#x6D6E;&#x52A8;</strong>&#x90FD;&#x65E0;&#x6CD5;&#x5FEB;&#x901F;&#x5B9E;&#x73B0;</p>
</blockquote>
<p>pink&#x8001;&#x5E08;&#x4E00;&#x53E5;&#x8BDD;&#x8BF4;&#x51FA;&#x5B9A;&#x4F4D;&#xFF1A;</p>
<blockquote>
<p>&#x5C06;&#x76D2;&#x5B50;<strong>&#x5B9A;</strong>&#x5728;&#x67D0;&#x4E00;&#x4E2A;<strong>&#x4F4D;</strong>&#x7F6E;  &#x81EA;&#x7531;&#x7684;&#x6F02;&#x6D6E;&#x5728;&#x5176;&#x4ED6;&#x76D2;&#x5B50;(&#x5305;&#x62EC;&#x6807;&#x51C6;&#x6D41;&#x548C;&#x6D6E;&#x52A8;)&#x7684;&#x4E0A;&#x9762; </p>
</blockquote>
<p>&#x6240;&#x4EE5;&#xFF0C;&#x6211;&#x4EEC;&#x8111;&#x6D77;&#x5E94;&#x8BE5;&#x6709;&#x4E09;&#x79CD;&#x5E03;&#x5C40;&#x673A;&#x5236;&#x7684;&#x4E0A;&#x4E0B;&#x987A;&#x5E8F;</p>
<p>&#x6807;&#x51C6;&#x6D41;&#x5728;&#x6700;&#x5E95;&#x5C42; (&#x6D77;&#x5E95;)  -------    &#x6D6E;&#x52A8; &#x7684;&#x76D2;&#x5B50; &#x5728; &#x4E2D;&#x95F4;&#x5C42;  (&#x6D77;&#x9762;)  -------   &#x5B9A;&#x4F4D;&#x7684;&#x76D2;&#x5B50; &#x5728; &#x6700;&#x4E0A;&#x5C42;  &#xFF08;&#x5929;&#x7A7A;&#xFF09;</p>
<h2 id="3-&#x5B9A;&#x4F4D;&#x8BE6;&#x89E3;">3. &#x5B9A;&#x4F4D;&#x8BE6;&#x89E3;</h2>
<p>&#x5B9A;&#x4F4D;&#x4E5F;&#x662F;&#x7528;&#x6765;&#x5E03;&#x5C40;&#x7684;&#xFF0C;&#x5B83;&#x6709;&#x4E24;&#x90E8;&#x5206;&#x7EC4;&#x6210;&#xFF1A;</p>
<blockquote>
<p><code>&#x5B9A;&#x4F4D; = &#x5B9A;&#x4F4D;&#x6A21;&#x5F0F; + &#x8FB9;&#x504F;&#x79FB;</code></p>
</blockquote>
<h3 id="31-&#x8FB9;&#x504F;&#x79FB;">3.1 &#x8FB9;&#x504F;&#x79FB;</h3>
<p>&#x7B80;&#x5355;&#x8BF4;&#xFF0C; &#x6211;&#x4EEC;&#x5B9A;&#x4F4D;&#x7684;&#x76D2;&#x5B50;&#xFF0C;&#x662F;&#x901A;&#x8FC7;&#x8FB9;&#x504F;&#x79FB;&#x6765;&#x79FB;&#x52A8;&#x4F4D;&#x7F6E;&#x7684;&#x3002;</p>
<p>&#x5728; CSS &#x4E2D;&#xFF0C;&#x901A;&#x8FC7; <code>top</code>&#x3001;<code>bottom</code>&#x3001;<code>left</code> &#x548C; <code>right</code> &#x5C5E;&#x6027;&#x5B9A;&#x4E49;&#x5143;&#x7D20;&#x7684;<strong>&#x8FB9;&#x504F;&#x79FB;</strong>&#xFF1A;&#xFF08;&#x65B9;&#x4F4D;&#x540D;&#x8BCD;&#xFF09;</p>
<table>
<thead>
<tr>
<th>&#x8FB9;&#x504F;&#x79FB;&#x5C5E;&#x6027;</th>
<th style="text-align:left">&#x793A;&#x4F8B;</th>
<th>&#x63CF;&#x8FF0;</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>top</code></td>
<td style="text-align:left"><code>top: 80px</code></td>
<td><strong>&#x9876;&#x7AEF;</strong>&#x504F;&#x79FB;&#x91CF;&#xFF0C;&#x5B9A;&#x4E49;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x5176;&#x7236;&#x5143;&#x7D20;<strong>&#x4E0A;&#x8FB9;&#x7EBF;&#x7684;&#x8DDD;&#x79BB;</strong>&#x3002;</td>
</tr>
<tr>
<td><code>bottom</code></td>
<td style="text-align:left"><code>bottom: 80px</code></td>
<td><strong>&#x5E95;&#x90E8;</strong>&#x504F;&#x79FB;&#x91CF;&#xFF0C;&#x5B9A;&#x4E49;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x5176;&#x7236;&#x5143;&#x7D20;<strong>&#x4E0B;&#x8FB9;&#x7EBF;&#x7684;&#x8DDD;&#x79BB;</strong>&#x3002;</td>
</tr>
<tr>
<td><code>left</code></td>
<td style="text-align:left"><code>left: 80px</code></td>
<td><strong>&#x5DE6;&#x4FA7;</strong>&#x504F;&#x79FB;&#x91CF;&#xFF0C;&#x5B9A;&#x4E49;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x5176;&#x7236;&#x5143;&#x7D20;<strong>&#x5DE6;&#x8FB9;&#x7EBF;&#x7684;&#x8DDD;&#x79BB;</strong>&#x3002;</td>
</tr>
<tr>
<td><code>right</code></td>
<td style="text-align:left"><code>right: 80px</code></td>
<td><strong>&#x53F3;&#x4FA7;</strong>&#x504F;&#x79FB;&#x91CF;&#xFF0C;&#x5B9A;&#x4E49;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x5176;&#x7236;&#x5143;&#x7D20;<strong>&#x53F3;&#x8FB9;&#x7EBF;&#x7684;&#x8DDD;&#x79BB;</strong></td>
</tr>
</tbody>
</table>
<p>&#x5B9A;&#x4F4D;&#x7684;&#x76D2;&#x5B50;&#x6709;&#x4E86;&#x8FB9;&#x504F;&#x79FB;&#x624D;&#x6709;&#x4EF7;&#x503C;&#x3002; &#x4E00;&#x822C;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x51E1;&#x662F;&#x6709;&#x5B9A;&#x4F4D;&#x5730;&#x65B9;&#x5FC5;&#x5B9A;&#x6709;&#x8FB9;&#x504F;&#x79FB;&#x3002;</p>
<h3 id="32--&#x5B9A;&#x4F4D;&#x6A21;&#x5F0F;-position">3.2  &#x5B9A;&#x4F4D;&#x6A21;&#x5F0F; (position)</h3>
<p>&#x5728; CSS &#x4E2D;&#xFF0C;&#x901A;&#x8FC7; <code>position</code> &#x5C5E;&#x6027;&#x5B9A;&#x4E49;&#x5143;&#x7D20;&#x7684;<strong>&#x5B9A;&#x4F4D;&#x6A21;&#x5F0F;</strong>&#xFF0C;&#x8BED;&#x6CD5;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre><code class="lang-css">&#x9009;&#x62E9;&#x5668; { <span class="hljs-attribute">position</span>: &#x5C5E;&#x6027;&#x503C;; }
</code></pre>
<p>&#x5B9A;&#x4F4D;&#x6A21;&#x5F0F;&#x662F;&#x6709;&#x4E0D;&#x540C;&#x5206;&#x7C7B;&#x7684;&#xFF0C;&#x5728;&#x4E0D;&#x540C;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x6211;&#x4EEC;&#x7528;&#x5230;&#x4E0D;&#x540C;&#x7684;&#x5B9A;&#x4F4D;&#x6A21;&#x5F0F;&#x3002;
| &#x503C;         |     &#x8BED;&#x4E49;     |
| ---------- | :----------: |
| <code>static</code>   | <strong>&#x9759;&#x6001;</strong>&#x5B9A;&#x4F4D; |
| <code>relative</code> | <strong>&#x76F8;&#x5BF9;</strong>&#x5B9A;&#x4F4D; |
| <code>absolute</code> | <strong>&#x7EDD;&#x5BF9;</strong>&#x5B9A;&#x4F4D; |
| <code>fixed</code>    | <strong>&#x56FA;&#x5B9A;</strong>&#x5B9A;&#x4F4D; |</p>
<h4 id="321-&#x9759;&#x6001;&#x5B9A;&#x4F4D;static---&#x4E86;&#x89E3;">3.2.1 &#x9759;&#x6001;&#x5B9A;&#x4F4D;(static) - &#x4E86;&#x89E3;</h4>
<ul>
<li><strong>&#x9759;&#x6001;&#x5B9A;&#x4F4D;</strong>&#x662F;&#x5143;&#x7D20;&#x7684;&#x9ED8;&#x8BA4;&#x5B9A;&#x4F4D;&#x65B9;&#x5F0F;&#xFF0C;&#x65E0;&#x5B9A;&#x4F4D;&#x7684;&#x610F;&#x601D;&#x3002;&#x5B83;&#x76F8;&#x5F53;&#x4E8E; border &#x91CC;&#x9762;&#x7684;none&#xFF0C; &#x4E0D;&#x8981;&#x5B9A;&#x4F4D;&#x7684;&#x65F6;&#x5019;&#x7528;&#x3002;</li>
<li>&#x9759;&#x6001;&#x5B9A;&#x4F4D; &#x6309;&#x7167;&#x6807;&#x51C6;&#x6D41;&#x7279;&#x6027;&#x6446;&#x653E;&#x4F4D;&#x7F6E;&#xFF0C;&#x5B83;&#x6CA1;&#x6709;&#x8FB9;&#x504F;&#x79FB;&#x3002;</li>
<li>&#x9759;&#x6001;&#x5B9A;&#x4F4D;&#x5728;&#x5E03;&#x5C40;&#x65F6;&#x6211;&#x4EEC;&#x51E0;&#x4E4E;&#x4E0D;&#x7528;&#x7684; </li>
</ul>
<h4 id="321-&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;relative---&#x91CD;&#x8981;">3.2.1 &#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;(relative) - &#x91CD;&#x8981;</h4>
<ul>
<li><strong>&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#x662F;&#x5143;&#x7D20;<strong>&#x76F8;&#x5BF9;</strong>&#x4E8E;&#x5B83;  &#x539F;&#x6765;&#x5728;&#x6807;&#x51C6;&#x6D41;&#x4E2D;&#x7684;&#x4F4D;&#x7F6E; &#x6765;&#x8BF4;&#x7684;&#x3002;&#xFF08;&#x81EA;&#x604B;&#x578B;&#xFF09;</li>
</ul>
<p><strong>&#x6548;&#x679C;&#x56FE;</strong>&#xFF1A;</p>
<p><img src="images/04_&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#x6848;&#x4F8B;.png" alt="&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#x6848;&#x4F8B;"></p>
<p>&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x7279;&#x70B9;&#xFF1A;&#xFF08;&#x52A1;&#x5FC5;&#x8BB0;&#x4F4F;&#xFF09;</p>
<ul>
<li>&#x76F8;&#x5BF9;&#x4E8E; &#x81EA;&#x5DF1;&#x539F;&#x6765;&#x5728;&#x6807;&#x51C6;&#x6D41;&#x4E2D;&#x4F4D;&#x7F6E;&#x6765;&#x79FB;&#x52A8;&#x7684;</li>
<li>&#x539F;&#x6765;<strong>&#x5728;&#x6807;&#x51C6;&#x6D41;&#x7684;&#x533A;&#x57DF;&#x7EE7;&#x7EED;&#x5360;&#x6709;</strong>&#xFF0C;&#x540E;&#x9762;&#x7684;&#x76D2;&#x5B50;&#x4ECD;&#x7136;&#x4EE5;&#x6807;&#x51C6;&#x6D41;&#x7684;&#x65B9;&#x5F0F;&#x5BF9;&#x5F85;&#x5B83;&#x3002;</li>
</ul>
<h4 id="323-&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;absolute---&#x91CD;&#x8981;">3.2.3 &#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;(absolute) - &#x91CD;&#x8981;</h4>
<p><strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#x662F;&#x5143;&#x7D20;&#x4EE5;&#x5E26;&#x6709;&#x5B9A;&#x4F4D;&#x7684;&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x6765;&#x79FB;&#x52A8;&#x4F4D;&#x7F6E; &#xFF08;&#x62FC;&#x7239;&#x578B;&#xFF09;</p>
<ol>
<li><p><strong>&#x5B8C;&#x5168;&#x8131;&#x6807;</strong> &#x2014;&#x2014; &#x5B8C;&#x5168;&#x4E0D;&#x5360;&#x4F4D;&#x7F6E;&#xFF1B;  </p>
</li>
<li><p><strong>&#x7236;&#x5143;&#x7D20;&#x6CA1;&#x6709;&#x5B9A;&#x4F4D;</strong>&#xFF0C;&#x5219;&#x4EE5;<strong>&#x6D4F;&#x89C8;&#x5668;</strong>&#x4E3A;&#x51C6;&#x5B9A;&#x4F4D;&#xFF08;Document &#x6587;&#x6863;&#xFF09;&#x3002;</p>
</li>
</ol>
<ol>
<li><strong>&#x7236;&#x5143;&#x7D20;&#x8981;&#x6709;&#x5B9A;&#x4F4D;</strong><ul>
<li>&#x5C06;&#x5143;&#x7D20;&#x4F9D;&#x636E;&#x6700;&#x8FD1;&#x7684;&#x5DF2;&#x7ECF;&#x5B9A;&#x4F4D;&#xFF08;&#x7EDD;&#x5BF9;&#x3001;&#x56FA;&#x5B9A;&#x6216;&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#xFF09;&#x7684;&#x7236;&#x5143;&#x7D20;&#xFF08;&#x7956;&#x5148;&#xFF09;&#x8FDB;&#x884C;&#x5B9A;&#x4F4D;&#x3002;</li>
</ul>
</li>
</ol>
<p>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x7279;&#x70B9;&#xFF1A;&#xFF08;&#x52A1;&#x5FC5;&#x8BB0;&#x4F4F;&#xFF09;</p>
<ul>
<li>&#x7EDD;&#x5BF9;&#x662F;&#x4EE5;&#x5E26;&#x6709;&#x5B9A;&#x4F4D;&#x7684;&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x6765;&#x79FB;&#x52A8;&#x4F4D;&#x7F6E; &#xFF08;&#x62FC;&#x7239;&#x578B;&#xFF09; &#x5982;&#x679C;&#x7236;&#x7EA7;&#x90FD;&#x6CA1;&#x6709;&#x5B9A;&#x4F4D;&#xFF0C;&#x5219;&#x4EE5;&#x6D4F;&#x89C8;&#x5668;&#x6587;&#x6863;&#x4E3A;&#x51C6;&#x79FB;&#x52A8;&#x4F4D;&#x7F6E;</li>
<li>&#x4E0D;&#x4FDD;&#x7559;&#x539F;&#x6765;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x5B8C;&#x5168;&#x662F;&#x8131;&#x6807;&#x7684;&#x3002;</li>
</ul>
<p>&#x56E0;&#x4E3A;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x76D2;&#x5B50;&#x662F;&#x62FC;&#x7239;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x8981;&#x548C;&#x7236;&#x7EA7;&#x642D;&#x914D;&#x4E00;&#x8D77;&#x6765;&#x4F7F;&#x7528;&#x3002;</p>
<h5 id="&#x5B9A;&#x4F4D;&#x53E3;&#x8BC0;-&#x2014;&#x2014;-&#x5B50;&#x7EDD;&#x7236;&#x76F8;">&#x5B9A;&#x4F4D;&#x53E3;&#x8BC0; &#x2014;&#x2014; &#x5B50;&#x7EDD;&#x7236;&#x76F8;</h5>
<p>&#x521A;&#x624D;&#x54B1;&#x4EEC;&#x8BF4;&#x8FC7;&#xFF0C;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#xFF0C;&#x8981;&#x548C;&#x5E26;&#x6709;&#x5B9A;&#x4F4D;&#x7684;&#x7236;&#x7EA7;&#x642D;&#x914D;&#x4F7F;&#x7528;&#xFF0C;&#x90A3;&#x4E48;&#x7236;&#x7EA7;&#x8981;&#x7528;&#x4EC0;&#x4E48;&#x5B9A;&#x4F4D;&#x5462;&#xFF1F;</p>
<p><strong>&#x5B50;&#x7EDD;&#x7236;&#x76F8;</strong> &#x2014;&#x2014; <strong>&#x5B50;&#x7EA7;</strong>&#x662F;<strong>&#x7EDD;&#x5BF9;</strong>&#x5B9A;&#x4F4D;&#xFF0C;<strong>&#x7236;&#x7EA7;</strong>&#x8981;&#x7528;<strong>&#x76F8;&#x5BF9;</strong>&#x5B9A;&#x4F4D;&#x3002;</p>
<blockquote>
<p><strong>&#x5B50;&#x7EDD;&#x7236;&#x76F8;</strong>&#x662F;&#x4F7F;&#x7528;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x53E3;&#x8BC0;&#xFF0C;&#x8981;&#x7262;&#x7262;&#x8BB0;&#x4F4F;&#xFF01;</p>
</blockquote>
<p><strong>&#x7591;&#x95EE;</strong>&#xFF1A;&#x4E3A;&#x4EC0;&#x4E48;&#x5728;&#x5E03;&#x5C40;&#x65F6;&#xFF0C;<strong>&#x5B50;&#x7EA7;&#x5143;&#x7D20;</strong>&#x4F7F;&#x7528;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#x65F6;&#xFF0C;<strong>&#x7236;&#x7EA7;&#x5143;&#x7D20;</strong>&#x5C31;&#x8981;&#x7528;<strong>&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#x5462;&#xFF1F;</p>
<p>&#x89C2;&#x5BDF;&#x4E0B;&#x56FE;&#xFF0C;&#x601D;&#x8003;&#x4E00;&#x4E0B;&#x5728;&#x5E03;&#x5C40;&#x65F6;&#xFF0C;<strong>&#x5DE6;&#x53F3;&#x4E24;&#x4E2A;&#x65B9;&#x5411;&#x7684;&#x7BAD;&#x5934;&#x56FE;&#x7247;</strong>&#x4EE5;&#x53CA;<strong>&#x7236;&#x7EA7;&#x76D2;&#x5B50;</strong>&#x7684;&#x5B9A;&#x4F4D;&#x65B9;&#x5F0F;&#x3002;</p>
<p><img src="images/07_&#x5B50;&#x7EDD;&#x7236;&#x76F8;&#x622A;&#x56FE;.png" alt="&#x5B50;&#x7EDD;&#x7236;&#x76F8;&#x622A;&#x56FE;"></p>
<p><strong>&#x5206;&#x6790;</strong>&#xFF1A;</p>
<ol>
<li><strong>&#x65B9;&#x5411;&#x7BAD;&#x5934;</strong>&#x53E0;&#x52A0;&#x5728;&#x5176;&#x4ED6;&#x56FE;&#x7247;&#x4E0A;&#x65B9;&#xFF0C;&#x5E94;&#x8BE5;&#x4F7F;&#x7528;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#xFF0C;&#x56E0;&#x4E3A;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x5B8C;&#x5168;&#x8131;&#x6807;</strong>&#xFF0C;&#x5B8C;&#x5168;&#x4E0D;&#x5360;&#x4F4D;&#x7F6E;&#x3002;</li>
<li><strong>&#x7236;&#x7EA7;&#x76D2;&#x5B50;</strong>&#x5E94;&#x8BE5;&#x4F7F;&#x7528;<strong>&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#xFF0C;&#x56E0;&#x4E3A;<strong>&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#x4E0D;&#x8131;&#x6807;</strong>&#xFF0C;&#x540E;&#x7EED;&#x76D2;&#x5B50;&#x4ECD;&#x7136;&#x4EE5;&#x6807;&#x51C6;&#x6D41;&#x7684;&#x65B9;&#x5F0F;&#x5BF9;&#x5F85;&#x5B83;&#x3002;<ul>
<li>&#x5982;&#x679C;&#x7236;&#x7EA7;&#x76D2;&#x5B50;&#x4E5F;&#x4F7F;&#x7528;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#xFF0C;&#x4F1A;&#x5B8C;&#x5168;&#x8131;&#x6807;&#xFF0C;&#x90A3;&#x4E48;&#x4E0B;&#x65B9;&#x7684;<strong>&#x5E7F;&#x544A;&#x76D2;&#x5B50;</strong>&#x4F1A;&#x4E0A;&#x79FB;&#xFF0C;&#x8FD9;&#x663E;&#x7136;&#x4E0D;&#x662F;&#x6211;&#x4EEC;&#x60F3;&#x8981;&#x7684;&#x3002;</li>
</ul>
</li>
</ol>
<p><strong>&#x7ED3;&#x8BBA;</strong>&#xFF1A;<strong>&#x7236;&#x7EA7;&#x8981;&#x5360;&#x6709;&#x4F4D;&#x7F6E;&#xFF0C;&#x5B50;&#x7EA7;&#x8981;&#x4EFB;&#x610F;&#x6446;&#x653E;</strong>&#xFF0C;&#x8FD9;&#x5C31;&#x662F;<strong>&#x5B50;&#x7EDD;&#x7236;&#x76F8;</strong>&#x7684;&#x7531;&#x6765;&#x3002;</p>
<h4 id="324-&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;fixed---&#x91CD;&#x8981;">3.2.4 &#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;(fixed) - &#x91CD;&#x8981;</h4>
<p><strong>&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;</strong>&#x662F;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#x7684;&#x4E00;&#x79CD;&#x7279;&#x6B8A;&#x5F62;&#x5F0F;&#xFF1A; &#xFF08;&#x8BA4;&#x6B7B;&#x7406;&#x578B;&#xFF09;   &#x5982;&#x679C;&#x8BF4;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x662F;&#x4E00;&#x4E2A;&#x77E9;&#x5F62; &#x90A3;&#x4E48; &#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#x5C31;&#x7C7B;&#x4F3C;&#x4E8E;&#x6B63;&#x65B9;&#x5F62;</p>
<ol>
<li><strong>&#x5B8C;&#x5168;&#x8131;&#x6807;</strong> &#x2014;&#x2014; &#x5B8C;&#x5168;&#x4E0D;&#x5360;&#x4F4D;&#x7F6E;&#xFF1B;</li>
<li>&#x53EA;&#x8BA4;<strong>&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x53EF;&#x89C6;&#x7A97;&#x53E3;</strong> &#x2014;&#x2014; <code>&#x6D4F;&#x89C8;&#x5668;&#x53EF;&#x89C6;&#x7A97;&#x53E3; + &#x8FB9;&#x504F;&#x79FB;&#x5C5E;&#x6027;</code> &#x6765;&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x4F4D;&#x7F6E;&#xFF1B;<ul>
<li>&#x8DDF;&#x7236;&#x5143;&#x7D20;&#x6CA1;&#x6709;&#x4EFB;&#x4F55;&#x5173;&#x7CFB;&#xFF1B;&#x5355;&#x72EC;&#x4F7F;&#x7528;&#x7684;</li>
<li>&#x4E0D;&#x968F;&#x6EDA;&#x52A8;&#x6761;&#x6EDA;&#x52A8;&#x3002;</li>
</ul>
</li>
</ol>
<blockquote>
<p>&#x6848;&#x4F8B;&#x6F14;&#x7EC3;&#xFF1A;&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#x6848;&#x4F8B;&#x3002;</p>
</blockquote>
<p><img src="images/08_&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#x6848;&#x4F8B;.png" alt="&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#x6848;&#x4F8B;"></p>
<p><strong>&#x63D0;&#x793A;</strong>&#xFF1A;IE 6 &#x7B49;&#x4F4E;&#x7248;&#x672C;&#x6D4F;&#x89C8;&#x5668;&#x4E0D;&#x652F;&#x6301;&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#x3002;</p>
<h2 id="4-&#x5B9A;&#x4F4D;position&#x7684;&#x6848;&#x4F8B;">4. &#x5B9A;&#x4F4D;(position)&#x7684;&#x6848;&#x4F8B;</h2>
<h3 id="41-&#x54C8;&#x6839;&#x8FBE;&#x65AF;">4.1 &#x54C8;&#x6839;&#x8FBE;&#x65AF;</h3>
<p><strong>&#x6848;&#x4F8B;&#x622A;&#x56FE;</strong>&#xFF1A;</p>
<h4 id="&#x54C8;&#x6839;&#x8FBE;&#x65AF;&#x5206;&#x6790;">&#x54C8;&#x6839;&#x8FBE;&#x65AF;&#x5206;&#x6790;</h4>
<ol>
<li>&#x4E00;&#x4E2A;&#x5927;&#x7684; <code>div</code> &#x4E2D;&#x5305;&#x542B; <code>3</code> &#x5F20;&#x56FE;&#x7247;&#xFF1B;</li>
<li>&#x5927;&#x7684; <code>div</code> &#x6C34;&#x5E73;&#x5C45;&#x4E2D;&#xFF1B;</li>
<li><code>2</code> &#x5F20;&#x5C0F;&#x56FE;&#x7247;<strong>&#x91CD;&#x53E0;</strong>&#x5728;<strong>&#x5E7F;&#x544A;</strong>&#x56FE;&#x7247;&#x4E0A;&#x65B9; &#x2014;&#x2014; &#x8131;&#x6807;&#xFF0C;&#x4E0D;&#x5360;&#x4F4D;&#x7F6E;&#xFF0C;&#x9700;&#x8981;&#x4F7F;&#x7528;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#xFF1B;</li>
<li><code>2</code> &#x5F20;&#x5C0F;&#x56FE;&#x7247;&#x5206;&#x522B;&#x663E;&#x793A;&#x5728;<strong>&#x5DE6;&#x4E0A;&#x89D2;</strong>&#x548C;<strong>&#x53F3;&#x4E0B;&#x89D2;</strong> &#x2014;&#x2014; &#x9700;&#x8981;<strong>&#x4F7F;&#x7528;&#x8FB9;&#x504F;&#x79FB;&#x786E;&#x5B9A;&#x51C6;&#x786E;&#x4F4D;&#x7F6E;</strong>&#x3002;</li>
</ol>
<p><strong>&#x6848;&#x4F8B;&#x5C0F;&#x7ED3;</strong>&#xFF1A;</p>
<ol>
<li><strong>&#x5B50;&#x7EDD;&#x7236;&#x76F8;</strong> &#x2014;&#x2014; <strong>&#x5B50;&#x5143;&#x7D20;</strong>&#x4F7F;&#x7528;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#xFF0C;<strong>&#x7236;&#x5143;&#x7D20;</strong>&#x4F7F;&#x7528;<strong>&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#xFF1B;</li>
<li><strong>&#x4E0E;&#x6D6E;&#x52A8;&#x7684;&#x5BF9;&#x6BD4;</strong>&#xFF1A;<ul>
<li><strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#xFF1A;&#x8131;&#x6807;&#xFF0C;<strong>&#x5229;&#x7528;&#x8FB9;&#x504F;&#x79FB;&#x6307;&#x5B9A;&#x51C6;&#x786E;&#x4F4D;&#x7F6E;</strong>&#xFF1B;</li>
<li><strong>&#x6D6E;&#x52A8;</strong>&#xFF1A;&#x8131;&#x6807;&#xFF0C;&#x4E0D;&#x80FD;&#x6307;&#x5B9A;&#x51C6;&#x786E;&#x4F4D;&#x7F6E;&#xFF0C;<strong>&#x8BA9;&#x591A;&#x4E2A;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x5728;&#x4E00;&#x884C;&#x663E;&#x793A;</strong>&#x3002;</li>
</ul>
</li>
</ol>
<blockquote>
<p>&#x8BFE;&#x5802;&#x7EC3;&#x4E60;&#xFF1A;&#x6A21;&#x62DF;&#x8001;&#x5E08;&#x7684;&#x968F;&#x5802;&#x6848;&#x4F8B;&#x5B8C;&#x6210;<strong>&#x54C8;&#x6839;&#x8FBE;&#x65AF;</strong>&#x6848;&#x4F8B;&#xFF08;5 &#x5206;&#x949F;&#xFF09;&#x3002;</p>
</blockquote>
<h3 id="42-&#x4EFF;&#x65B0;&#x6D6A;&#x5934;&#x90E8;&#x548C;&#x5E7F;&#x544A;">4.2 &#x4EFF;&#x65B0;&#x6D6A;&#x5934;&#x90E8;&#x548C;&#x5E7F;&#x544A;</h3>
<h4 id="&#x65B0;&#x6D6A;&#x6848;&#x4F8B;&#x5206;&#x6790;">&#x65B0;&#x6D6A;&#x6848;&#x4F8B;&#x5206;&#x6790;</h4>
<ol>
<li>&#x9876;&#x90E8;&#x56FE;&#x7247;<strong>&#x56FA;&#x5B9A;</strong>&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x53EF;&#x89C6;&#x7A97;&#x53E3;&#x9876;&#x90E8;&#xFF0C;&#x4E0D;&#x4F1A;&#x968F;&#x7A97;&#x53E3;&#x4E00;&#x8D77;&#x6EDA;&#x52A8;&#xFF1B;</li>
<li>&#x5DE6;&#x53F3;&#x4E24;&#x4FA7;&#x7684;&#x5E7F;&#x544A;&#x56FE;&#x7247;<strong>&#x56FA;&#x5B9A;</strong>&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x53EF;&#x89C6;&#x7A97;&#x53E3;&#x7684;&#x5DE6;&#x53F3;&#x4E24;&#x4FA7;&#xFF0C;&#x4E0D;&#x4F1A;&#x968F;&#x7A97;&#x53E3;&#x4E00;&#x8D77;&#x6EDA;&#x52A8;&#xFF1B;</li>
<li>&#x6CE8;&#x610F;&#xFF1A;<strong>&#x5E95;&#x90E8;&#x7684;&#x5185;&#x5BB9;&#x56FE;&#x7247;</strong>&#x521D;&#x59CB;<strong>&#x663E;&#x793A;&#x5728;&#x9876;&#x90E8;&#x56FE;&#x7247;&#x7684;&#x4E0B;&#x65B9;</strong>&#xFF0C;&#x5982;&#x4F55;&#x89E3;&#x51B3;&#xFF1F;</li>
</ol>
<h4 id="&#x6B65;&#x9AA4;-1-&#x2014;&#x2014;-&#x9876;&#x90E8;&#x56FE;&#x7247;&#x548C;&#x5E95;&#x90E8;&#x5185;&#x5BB9;">&#x6B65;&#x9AA4; 1 &#x2014;&#x2014; &#x9876;&#x90E8;&#x56FE;&#x7247;&#x548C;&#x5E95;&#x90E8;&#x5185;&#x5BB9;</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.top</span> {
    <span class="hljs-comment">/* &#x6CE8;&#x610F;&#xFF1A;&#x4F7F;&#x7528;&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#x65F6;&#xFF0C;&#x5982;&#x679C;&#x76D2;&#x5B50;&#x4E2D;&#x6CA1;&#x6709;&#x5185;&#x5BB9;&#xFF0C;&#x9700;&#x8981;&#x6307;&#x5B9A;&#x5BBD;&#x5EA6; */</span>
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">44px</span>;
    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">url</span>(images/top.png) no-repeat top center;
    <span class="hljs-attribute">position</span>: fixed;
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">0px</span>;
}

<span class="hljs-selector-class">.box</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">1002px</span>;
    <span class="hljs-comment">/* &#x9876;&#x90E8;&#x7684; 44px &#x7684; margin &#x53EF;&#x4EE5;&#x8BA9; box &#x663E;&#x793A;&#x5728;&#x9876;&#x90E8;&#x56FE;&#x7247;&#x4E0B;&#x65B9; */</span>
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">44px</span> auto;
}
</code></pre>
<p><strong>&#x6CE8;&#x610F;</strong>&#xFF1A;</p>
<ol>
<li>&#x5728;&#x4F7F;&#x7528;&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#x65F6;&#xFF0C;&#x5982;&#x679C;&#x76D2;&#x5B50;&#x4E2D;&#x6CA1;&#x6709;&#x5185;&#x5BB9;&#xFF0C;&#x9700;&#x8981;&#x6307;&#x5B9A;&#x5BBD;&#x5EA6;</li>
<li>&#x8BBE;&#x7F6E;&#x5E95;&#x90E8;&#x5185;&#x5BB9;&#x56FE;&#x7247;&#x7684;<strong>&#x9876;&#x90E8; <code>margin</code></strong>&#xFF0C;&#x53EF;&#x4EE5;&#x8BA9;&#x5E95;&#x90E8;&#x76D2;&#x5B50;&#x521D;&#x59CB;&#x663E;&#x793A;&#x5728;&#x9876;&#x90E8;&#x56FE;&#x7247;&#x7684;&#x4E0B;&#x65B9;&#x3002;</li>
</ol>
<h4 id="&#x6B65;&#x9AA4;-2-&#x2014;&#x2014;-&#x5DE6;&#x53F3;&#x4E24;&#x4FA7;&#x5E7F;&#x544A;">&#x6B65;&#x9AA4; 2 &#x2014;&#x2014; &#x5DE6;&#x53F3;&#x4E24;&#x4FA7;&#x5E7F;&#x544A;</h4>
<pre><code class="lang-css"><span class="hljs-selector-class">.ad-left</span>,
<span class="hljs-selector-class">.ad-right</span> {
    <span class="hljs-attribute">position</span>: fixed;
    <span class="hljs-attribute">top</span>: <span class="hljs-number">100px</span>;
}

<span class="hljs-selector-class">.ad-left</span> {
    <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;
}

<span class="hljs-selector-class">.ad-right</span> {
    <span class="hljs-attribute">right</span>: <span class="hljs-number">0px</span>;
}
</code></pre>
<p><strong>&#x6CE8;&#x610F;</strong>&#xFF1A;&#x4E0D;&#x8981;&#x540C;&#x65F6;&#x4F7F;&#x7528; <code>left</code> &#x548C; <code>right</code> &#x548C;&#x8FB9;&#x504F;&#x79FB;&#x5C5E;&#x6027;&#x3002;</p>
<p><strong>&#x6848;&#x4F8B;&#x5C0F;&#x7ED3;</strong>&#xFF1A;</p>
<ol>
<li><strong>&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;</strong>&#x7684;&#x5E94;&#x7528;&#x573A;&#x666F;&#xFF1A;<strong>&#x56FA;&#x5B9A;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x53EF;&#x89C6;&#x7A97;&#x53E3;&#x67D0;&#x4E2A;&#x4F4D;&#x7F6E;&#x7684;&#x5E03;&#x5C40;</strong>&#xFF1B;</li>
<li>&#x5728;&#x4F7F;&#x7528;&#x56FA;&#x5B9A;&#x548C;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x65F6;&#xFF0C;&#x5982;&#x679C;&#x76D2;&#x5B50;&#x4E2D;&#x6CA1;&#x6709;&#x5185;&#x5BB9;&#xFF0C;&#x9700;&#x8981;&#x6307;&#x5B9A;&#x5BBD;&#x5EA6;&#xFF08;&#x7A0D;&#x540E;&#x5C31;&#x8BB2;&#xFF09;&#x3002;</li>
</ol>
<blockquote>
<p>&#x8BFE;&#x5802;&#x7EC3;&#x4E60;&#xFF1A;&#x6A21;&#x62DF;&#x8001;&#x5E08;&#x7684;&#x968F;&#x5802;&#x6848;&#x4F8B;&#x5B8C;&#x6210;<strong>&#x4EFF;&#x65B0;&#x6D6A;&#x5934;&#x90E8;&#x548C;&#x5E7F;&#x544A;</strong>&#x6848;&#x4F8B;&#xFF08;5 &#x5206;&#x949F;&#xFF09;&#x3002;</p>
</blockquote>
<h2 id="5-&#x5B9A;&#x4F4D;position&#x7684;&#x6269;&#x5C55;">5. &#x5B9A;&#x4F4D;(position)&#x7684;&#x6269;&#x5C55;</h2>
<h3 id="51-&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x76D2;&#x5B50;&#x5C45;&#x4E2D;">5.1 &#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x76D2;&#x5B50;&#x5C45;&#x4E2D;</h3>
<blockquote>
<p><strong>&#x6CE8;&#x610F;</strong>&#xFF1A;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;/&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#x7684;&#x76D2;&#x5B50;</strong>&#x4E0D;&#x80FD;&#x901A;&#x8FC7;&#x8BBE;&#x7F6E; <code>margin: auto</code> &#x8BBE;&#x7F6E;<strong>&#x6C34;&#x5E73;&#x5C45;&#x4E2D;</strong>&#x3002;</p>
</blockquote>
<p>&#x5728;&#x4F7F;&#x7528;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#x65F6;&#x8981;&#x60F3;&#x5B9E;&#x73B0;&#x6C34;&#x5E73;&#x5C45;&#x4E2D;&#xFF0C;&#x53EF;&#x4EE5;&#x6309;&#x7167;&#x4E0B;&#x56FE;&#x7684;&#x65B9;&#x6CD5;&#xFF1A;</p>
<p><img src="images/10_&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x6C34;&#x5E73;&#x5C45;&#x4E2D;.png" alt="&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x6C34;&#x5E73;&#x5C45;&#x4E2D;"></p>
<ol>
<li><code>left: 50%;</code>&#xFF1A;&#x8BA9;<strong>&#x76D2;&#x5B50;&#x7684;&#x5DE6;&#x4FA7;</strong>&#x79FB;&#x52A8;&#x5230;<strong>&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x6C34;&#x5E73;&#x4E2D;&#x5FC3;&#x4F4D;&#x7F6E;</strong>&#xFF1B;</li>
<li><code>margin-left: -100px;</code>&#xFF1A;&#x8BA9;&#x76D2;&#x5B50;<strong>&#x5411;&#x5DE6;</strong>&#x79FB;&#x52A8;<strong>&#x81EA;&#x8EAB;&#x5BBD;&#x5EA6;&#x7684;&#x4E00;&#x534A;</strong>&#x3002;</li>
</ol>
<blockquote>
<p>&#x6848;&#x4F8B;&#x6F14;&#x793A;&#xFF1A;&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#x6848;&#x4F8B;&#x3002;</p>
</blockquote>
<h4 id="&#x76D2;&#x5B50;&#x5C45;&#x4E2D;&#x5B9A;&#x4F4D;&#x793A;&#x610F;&#x56FE;">&#x76D2;&#x5B50;&#x5C45;&#x4E2D;&#x5B9A;&#x4F4D;&#x793A;&#x610F;&#x56FE;</h4>
<p><img src="images/11_&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x5C45;&#x4E2D;&#x793A;&#x610F;&#x56FE;.png" alt="&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x5C45;&#x4E2D;&#x793A;&#x610F;&#x56FE;"></p>
<blockquote>
<p>&#x8BFE;&#x5802;&#x7EC3;&#x4E60;&#xFF1A;&#x5B9E;&#x73B0;<strong>&#x76D2;&#x5B50;&#x5DE6;&#x4E2D;&#x3001;&#x53F3;&#x4E2D;&#x3001;&#x4E2D;&#x4E0A;&#x3001;&#x4E2D;&#x4E0B;&#x3001;&#x4E2D;&#x4E2D;&#x5B9A;&#x4F4D;</strong>&#xFF08;5 &#x5206;&#x949F;&#xFF09;&#x3002;</p>
</blockquote>
<h3 id="52-&#x5806;&#x53E0;&#x987A;&#x5E8F;&#xFF08;z-index&#xFF09;">5.2 &#x5806;&#x53E0;&#x987A;&#x5E8F;&#xFF08;z-index&#xFF09;</h3>
<p>&#x5728;&#x4F7F;&#x7528;<strong>&#x5B9A;&#x4F4D;</strong>&#x5E03;&#x5C40;&#x65F6;&#xFF0C;&#x53EF;&#x80FD;&#x4F1A;<strong>&#x51FA;&#x73B0;&#x76D2;&#x5B50;&#x91CD;&#x53E0;&#x7684;&#x60C5;&#x51B5;</strong>&#x3002;</p>
<p>&#x52A0;&#x4E86;&#x5B9A;&#x4F4D;&#x7684;&#x76D2;&#x5B50;&#xFF0C;&#x9ED8;&#x8BA4;<strong>&#x540E;&#x6765;&#x8005;&#x5C45;&#x4E0A;</strong>&#xFF0C; &#x540E;&#x9762;&#x7684;&#x76D2;&#x5B50;&#x4F1A;&#x538B;&#x4F4F;&#x524D;&#x9762;&#x7684;&#x76D2;&#x5B50;&#x3002;</p>
<p>&#x5E94;&#x7528; <code>z-index</code> &#x5C42;&#x53E0;&#x7B49;&#x7EA7;&#x5C5E;&#x6027;&#x53EF;&#x4EE5;<strong>&#x8C03;&#x6574;&#x76D2;&#x5B50;&#x7684;&#x5806;&#x53E0;&#x987A;&#x5E8F;</strong>&#x3002;&#x5982;&#x4E0B;&#x56FE;&#x6240;&#x793A;&#xFF1A;</p>
<p><img src="images/12_zindex&#x793A;&#x610F;&#x56FE;.png" alt="zindex&#x793A;&#x610F;&#x56FE;"></p>
<p><code>z-index</code> &#x7684;&#x7279;&#x6027;&#x5982;&#x4E0B;&#xFF1A;</p>
<ol>
<li><strong>&#x5C5E;&#x6027;&#x503C;</strong>&#xFF1A;<strong>&#x6B63;&#x6574;&#x6570;</strong>&#x3001;<strong>&#x8D1F;&#x6574;&#x6570;</strong>&#x6216; <strong>0</strong>&#xFF0C;&#x9ED8;&#x8BA4;&#x503C;&#x662F; 0&#xFF0C;&#x6570;&#x503C;&#x8D8A;&#x5927;&#xFF0C;&#x76D2;&#x5B50;&#x8D8A;&#x9760;&#x4E0A;&#xFF1B;</li>
<li>&#x5982;&#x679C;<strong>&#x5C5E;&#x6027;&#x503C;&#x76F8;&#x540C;</strong>&#xFF0C;&#x5219;&#x6309;&#x7167;&#x4E66;&#x5199;&#x987A;&#x5E8F;&#xFF0C;<strong>&#x540E;&#x6765;&#x5C45;&#x4E0A;</strong>&#xFF1B;</li>
<li><strong>&#x6570;&#x5B57;&#x540E;&#x9762;&#x4E0D;&#x80FD;&#x52A0;&#x5355;&#x4F4D;</strong>&#x3002;</li>
</ol>
<p><strong>&#x6CE8;&#x610F;</strong>&#xFF1A;<code>z-index</code> &#x53EA;&#x80FD;&#x5E94;&#x7528;&#x4E8E;<strong>&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#x3001;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#x548C;<strong>&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;</strong>&#x7684;&#x5143;&#x7D20;&#xFF0C;&#x5176;&#x4ED6;<strong>&#x6807;&#x51C6;&#x6D41;</strong>&#x3001;<strong>&#x6D6E;&#x52A8;</strong>&#x548C;<strong>&#x9759;&#x6001;&#x5B9A;&#x4F4D;</strong>&#x65E0;&#x6548;&#x3002;</p>
<blockquote>
<p>&#x6848;&#x4F8B;&#x6F14;&#x793A;&#xFF1A;&#x5806;&#x53E0;&#x987A;&#x5E8F;&#x3002;</p>
</blockquote>
<h3 id="53-&#x5B9A;&#x4F4D;&#x6539;&#x53D8;display&#x5C5E;&#x6027;">5.3 &#x5B9A;&#x4F4D;&#x6539;&#x53D8;display&#x5C5E;&#x6027;</h3>
<p> &#x524D;&#x9762;&#x6211;&#x4EEC;&#x8BB2;&#x8FC7;&#xFF0C; display &#x662F; &#x663E;&#x793A;&#x6A21;&#x5F0F;&#xFF0C; &#x53EF;&#x4EE5;&#x6539;&#x53D8;&#x663E;&#x793A;&#x6A21;&#x5F0F;&#x6709;&#x4EE5;&#x4E0B;&#x65B9;&#x5F0F;:</p>
<ul>
<li>&#x53EF;&#x4EE5;&#x7528;inline-block  &#x8F6C;&#x6362;&#x4E3A;&#x884C;&#x5185;&#x5757;</li>
<li>&#x53EF;&#x4EE5;&#x7528;&#x6D6E;&#x52A8; float &#x9ED8;&#x8BA4;&#x8F6C;&#x6362;&#x4E3A;&#x884C;&#x5185;&#x5757;&#xFF08;&#x7C7B;&#x4F3C;&#xFF0C;&#x5E76;&#x4E0D;&#x5B8C;&#x5168;&#x4E00;&#x6837;&#xFF0C;&#x56E0;&#x4E3A;&#x6D6E;&#x52A8;&#x662F;&#x8131;&#x6807;&#x7684;&#xFF09;</li>
<li>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x548C;&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#x4E5F;&#x548C;&#x6D6E;&#x52A8;&#x7C7B;&#x4F3C;&#xFF0C; &#x9ED8;&#x8BA4;&#x8F6C;&#x6362;&#x7684;&#x7279;&#x6027; &#x8F6C;&#x6362;&#x4E3A;&#x884C;&#x5185;&#x5757;&#x3002;</li>
</ul>
<p>&#x6240;&#x4EE5;&#x8BF4;&#xFF0C; &#x4E00;&#x4E2A;&#x884C;&#x5185;&#x7684;&#x76D2;&#x5B50;&#xFF0C;&#x5982;&#x679C;&#x52A0;&#x4E86;<strong>&#x6D6E;&#x52A8;</strong>&#x3001;<strong>&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;</strong>&#x548C;<strong>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</strong>&#xFF0C;&#x4E0D;&#x7528;&#x8F6C;&#x6362;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x7ED9;&#x8FD9;&#x4E2A;&#x76D2;&#x5B50;&#x76F4;&#x63A5;&#x8BBE;&#x7F6E;&#x5BBD;&#x5EA6;&#x548C;&#x9AD8;&#x5EA6;&#x7B49;&#x3002;</p>
<blockquote>
<p>&#x5B8C;&#x5584;&#x65B0;&#x6D6A;&#x5BFC;&#x822A;&#x6848;&#x4F8B;</p>
</blockquote>
<p><strong>&#x540C;&#x65F6;&#x6CE8;&#x610F;&#xFF1A;</strong></p>
<p>&#x6D6E;&#x52A8;&#x5143;&#x7D20;&#x3001;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;(&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#xFF09;&#x5143;&#x7D20;&#x7684;&#x90FD;&#x4E0D;&#x4F1A;&#x89E6;&#x53D1;&#x5916;&#x8FB9;&#x8DDD;&#x5408;&#x5E76;&#x7684;&#x95EE;&#x9898;&#x3002; &#xFF08;&#x6211;&#x4EEC;&#x4EE5;&#x524D;&#x662F;&#x7528;padding border overflow&#x89E3;&#x51B3;&#x7684;&#xFF09;</p>
<p>&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#xFF0C;&#x6211;&#x4EEC;&#x7ED9;&#x76D2;&#x5B50;&#x6539;&#x4E3A;&#x4E86;&#x6D6E;&#x52A8;&#x6216;&#x8005;&#x5B9A;&#x4F4D;&#xFF0C;&#x5C31;&#x4E0D;&#x4F1A;&#x6709;&#x5782;&#x76F4;&#x5916;&#x8FB9;&#x8DDD;&#x5408;&#x5E76;&#x7684;&#x95EE;&#x9898;&#x4E86;&#x3002;</p>
<h2 id="6-&#x7EFC;&#x5408;&#x6F14;&#x7EC3;---&#x6DD8;&#x5B9D;&#x8F6E;&#x64AD;&#x56FE;">6. &#x7EFC;&#x5408;&#x6F14;&#x7EC3; - &#x6DD8;&#x5B9D;&#x8F6E;&#x64AD;&#x56FE;</h2>
<h4 id="&#x5706;&#x89D2;&#x77E9;&#x5F62;&#x8BBE;&#x7F6E;4&#x4E2A;&#x89D2;">&#x5706;&#x89D2;&#x77E9;&#x5F62;&#x8BBE;&#x7F6E;4&#x4E2A;&#x89D2;</h4>
<p>&#x5706;&#x89D2;&#x77E9;&#x5F62;&#x53EF;&#x4EE5;&#x4E3A;4&#x4E2A;&#x89D2;&#x5206;&#x522B;&#x8BBE;&#x7F6E;&#x5706;&#x5EA6;&#xFF0C; &#x4F46;&#x662F;&#x662F;&#x6709;&#x987A;&#x5E8F;&#x7684;</p>
<pre><code>border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
</code></pre><ul>
<li><p>&#x5982;&#x679C;4&#x4E2A;&#x89D2;&#xFF0C;&#x6570;&#x503C;&#x76F8;&#x540C;</p>
<pre><code class="lang-css"><span class="hljs-selector-tag">border-radius</span>: 15<span class="hljs-selector-tag">px</span>;
</code></pre>
</li>
<li><p>&#x91CC;&#x9762;&#x6570;&#x503C;&#x4E0D;&#x540C;&#xFF0C;&#x6211;&#x4EEC;&#x4E5F;&#x53EF;&#x4EE5;&#x6309;&#x7167;&#x7B80;&#x5199;&#x7684;&#x5F62;&#x5F0F;&#xFF0C;&#x5177;&#x4F53;&#x683C;&#x5F0F;&#x5982;&#x4E0B;:</p>
</li>
</ul>
<pre><code class="lang-css"><span class="hljs-selector-tag">border-radius</span>: &#x5DE6;&#x4E0A;&#x89D2; &#x53F3;&#x4E0A;&#x89D2;  &#x53F3;&#x4E0B;&#x89D2;  &#x5DE6;&#x4E0B;&#x89D2;;
</code></pre>
<p>&#x8FD8;&#x662F;&#x9075;&#x5FAA;&#x7684;&#x987A;&#x65F6;&#x9488;&#x3002;</p>
<h2 id="7-&#x5B9A;&#x4F4D;&#x5C0F;&#x7ED3;">7. &#x5B9A;&#x4F4D;&#x5C0F;&#x7ED3;</h2>
<table>
<thead>
<tr>
<th>&#x5B9A;&#x4F4D;&#x6A21;&#x5F0F;</th>
<th>&#x662F;&#x5426;&#x8131;&#x6807;&#x5360;&#x6709;&#x4F4D;&#x7F6E;</th>
<th style="text-align:left">&#x79FB;&#x52A8;&#x4F4D;&#x7F6E;&#x57FA;&#x51C6;</th>
<th>&#x6A21;&#x5F0F;&#x8F6C;&#x6362;&#xFF08;&#x884C;&#x5185;&#x5757;&#xFF09;</th>
<th>&#x4F7F;&#x7528;&#x60C5;&#x51B5;</th>
</tr>
</thead>
<tbody>
<tr>
<td>&#x9759;&#x6001;static</td>
<td>&#x4E0D;&#x8131;&#x6807;&#xFF0C;&#x6B63;&#x5E38;&#x6A21;&#x5F0F;</td>
<td style="text-align:left">&#x6B63;&#x5E38;&#x6A21;&#x5F0F;</td>
<td>&#x4E0D;&#x80FD;</td>
<td>&#x51E0;&#x4E4E;&#x4E0D;&#x7528;</td>
</tr>
<tr>
<td>&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;relative</td>
<td>&#x4E0D;&#x8131;&#x6807;&#xFF0C;&#x5360;&#x6709;&#x4F4D;&#x7F6E;</td>
<td style="text-align:left">&#x76F8;&#x5BF9;&#x81EA;&#x8EAB;&#x4F4D;&#x7F6E;&#x79FB;&#x52A8;</td>
<td>&#x4E0D;&#x80FD;</td>
<td>&#x57FA;&#x672C;&#x5355;&#x72EC;&#x4F7F;&#x7528;</td>
</tr>
<tr>
<td>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;absolute</td>
<td>&#x5B8C;&#x5168;&#x8131;&#x6807;&#xFF0C;&#x4E0D;&#x5360;&#x6709;&#x4F4D;&#x7F6E;</td>
<td style="text-align:left">&#x76F8;&#x5BF9;&#x4E8E;&#x5B9A;&#x4F4D;&#x7236;&#x7EA7;&#x79FB;&#x52A8;&#x4F4D;&#x7F6E;</td>
<td>&#x80FD;</td>
<td>&#x8981;&#x548C;&#x5B9A;&#x4F4D;&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x642D;&#x914D;&#x4F7F;&#x7528;</td>
</tr>
<tr>
<td>&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;fixed</td>
<td>&#x5B8C;&#x5168;&#x8131;&#x6807;&#xFF0C;&#x4E0D;&#x5360;&#x6709;&#x4F4D;&#x7F6E;</td>
<td style="text-align:left">&#x76F8;&#x5BF9;&#x4E8E;&#x6D4F;&#x89C8;&#x5668;&#x79FB;&#x52A8;&#x4F4D;&#x7F6E;</td>
<td>&#x80FD;</td>
<td>&#x5355;&#x72EC;&#x4F7F;&#x7528;&#xFF0C;&#x4E0D;&#x9700;&#x8981;&#x7236;&#x7EA7;</td>
</tr>
</tbody>
</table>
<p><strong>&#x6CE8;&#x610F;</strong>&#xFF1A;</p>
<ol>
<li><strong>&#x8FB9;&#x504F;&#x79FB;</strong>&#x9700;&#x8981;&#x548C;<strong>&#x5B9A;&#x4F4D;&#x6A21;&#x5F0F;</strong>&#x8054;&#x5408;&#x4F7F;&#x7528;&#xFF0C;<strong>&#x5355;&#x72EC;&#x4F7F;&#x7528;&#x65E0;&#x6548;</strong>&#xFF1B;</li>
<li><code>top</code> &#x548C; <code>bottom</code> &#x4E0D;&#x8981;&#x540C;&#x65F6;&#x4F7F;&#x7528;&#xFF1B;</li>
<li><code>left</code> &#x548C; <code>right</code> &#x4E0D;&#x8981;&#x540C;&#x65F6;&#x4F7F;&#x7528;&#x3002;</li>
</ol>
<h2 id="8&#x5B66;&#x6210;&#x7F51;&#x5B9A;&#x4F4D;&#x603B;&#x7ED3;&#x6DFB;&#x52A0;">8.&#x5B66;&#x6210;&#x7F51;&#x5B9A;&#x4F4D;&#x603B;&#x7ED3;&#x6DFB;&#x52A0;</h2>
<p>&#x4E00;&#x4E2A;&#x5C0F;&#x6280;&#x5DE7;:</p>
<h2 id="9-&#x7F51;&#x9875;&#x5E03;&#x5C40;&#x603B;&#x7ED3;">9. &#x7F51;&#x9875;&#x5E03;&#x5C40;&#x603B;&#x7ED3;</h2>
<p>&#x4E00;&#x4E2A;&#x5B8C;&#x6574;&#x7684;&#x7F51;&#x9875;&#xFF0C;&#x6709;&#x6807;&#x51C6;&#x6D41; &#x3001; &#x6D6E;&#x52A8; &#x3001; &#x5B9A;&#x4F4D; &#x4E00;&#x8D77;&#x5B8C;&#x6210;&#x5E03;&#x5C40;&#x7684;&#x3002;&#x6BCF;&#x4E2A;&#x90FD;&#x6709;&#x81EA;&#x5DF1;&#x7684;&#x4E13;&#x95E8;&#x7528;&#x6CD5;&#x3002;</p>
<h4 id="1-&#x6807;&#x51C6;&#x6D41;">1). &#x6807;&#x51C6;&#x6D41;</h4>
<p>&#x53EF;&#x4EE5;&#x8BA9;&#x76D2;&#x5B50;&#x4E0A;&#x4E0B;&#x6392;&#x5217; &#x6216;&#x8005; &#x5DE6;&#x53F3;&#x6392;&#x5217;&#x7684;</p>
<h4 id="2-&#x6D6E;&#x52A8;">2). &#x6D6E;&#x52A8;</h4>
<p>&#x53EF;&#x4EE5;&#x8BA9;&#x591A;&#x4E2A;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x4E00;&#x884C;&#x663E;&#x793A;  &#x6216;&#x8005; &#x5DE6;&#x53F3;&#x5BF9;&#x9F50;&#x76D2;&#x5B50;   &#x6D6E;&#x52A8;&#x7684;&#x76D2;&#x5B50;&#x5C31;&#x662F;&#x6309;&#x7167;&#x987A;&#x5E8F;&#x5DE6;&#x53F3;&#x6392;&#x5217; </p>
<h4 id="3-&#x5B9A;&#x4F4D;">3). &#x5B9A;&#x4F4D;</h4>
<p>&#x5B9A;&#x4F4D;&#x6700;&#x5927;&#x7684;&#x7279;&#x70B9;&#x662F;&#x6709;&#x5C42;&#x53E0;&#x7684;&#x6982;&#x5FF5;&#xFF0C;&#x5C31;&#x662F;&#x53EF;&#x4EE5;&#x8BA9;&#x591A;&#x4E2A;&#x76D2;&#x5B50; &#x524D;&#x540E; &#x53E0;&#x538B;&#x6765;&#x663E;&#x793A;&#x3002; &#x4F46;&#x662F;&#x6BCF;&#x4E2A;&#x76D2;&#x5B50;&#x9700;&#x8981;&#x6D4B;&#x91CF;&#x6570;&#x503C;&#x3002;</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="../5/1.html" class="navigation navigation-prev " aria-label="Previous page: 8">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="../7/1.html" class="navigation navigation-next " aria-label="Next page: 10">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"9","level":"1.9","depth":1,"next":{"title":"10","level":"1.10","depth":1,"path":"7/1.md","ref":"7/1.md","articles":[]},"previous":{"title":"8","level":"1.8","depth":1,"path":"5/1.md","ref":"5/1.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"6/1.md","mtime":"2020-11-12T14:09:30.141Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-11-12T14:12:15.513Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

